<form id="<?php echo $uniqid;?>" method="post" style="padding: 8px;">
    <table border="0" width="100%" cellspacing="1" cellpadding="5" class="formtable">
        <tr bgcolor="#FFFFFF">
            <td class="tlabel">店铺代理申请ID：</td>
            <td width="80%">{{params.id}}</td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td class="tlabel">店铺代理申请人ID：</td>
            <td width="80%">{{params.member_id}}</td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td class="tlabel">企业名称：</td>
            <td width="80%">
                <input type="text" style="width:300px;" v-model="params.company_name"
                       class="forminput inputstyle textbox-text validatebox-text textbox-prompt easyui-validatebox"
                       placeholder="请输入企业名称..">
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td class="tlabel">企业法人：</td>
            <td width="80%">
                <input type="text" style="width:300px;" v-model="params.realname"
                       class="forminput inputstyle textbox-text validatebox-text textbox-prompt easyui-validatebox"
                       placeholder="请输入企业法人..">
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td class="tlabel">企业联系电话：</td>
            <td width="80%">
                <input type="text" style="width:300px;" v-model="params.phone"
                       class="forminput inputstyle textbox-text validatebox-text textbox-prompt easyui-validatebox"
                       placeholder="请输入企业联系电话..">
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td class="tlabel">代理类型：</td>
            <td width="80%">
                <label v-for="(name, level) in qudaiLevel"><input name="status" type="radio" class="textbox-prompt" v-model.number="params.area_level" :value="level">{{name}}</label>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td  class="tlabel" >代理申请地区：</td>
            <td width="80%">
                <SELECT v-model="params.province_id" @change="provChange" style="width: 120px" class="forminput inputstyle textbox-text validatebox-text textbox-prompt easyui-validatebox">
                    <template v-for="(vo,index) in prov">
                        <OPTION :value="vo.id">{{vo.name}}</OPTION>
                    </template>
                </SELECT>
                <SELECT v-if="params.province_id>0" v-model="params.city_id" @change="cityChange" style="width: 140px"  class="forminput inputstyle textbox-text validatebox-text textbox-prompt easyui-validatebox">
                    <OPTION :value="0">请选择城市</OPTION>
                    <template v-for="(vo,index) in city">
                        <OPTION v-if="vo.pid==params.province_id" :value="vo.id">{{vo.name}}</OPTION>
                    </template>
                </SELECT>
                <SELECT v-if="params.province_id>0 && params.city_id>0 && params.area_level === 3" @change="areaChange" v-model="params.area_id" style="width: 140px" class="forminput inputstyle textbox-text validatebox-text textbox-prompt easyui-validatebox">
                    <OPTION :value="0">请选择县区</OPTION>
                    <template v-for="(vo,index) in area">
                        <OPTION v-if="vo.pid==params.city_id" :value="vo.id">{{vo.name}}</OPTION>
                    </template>
                </SELECT>
            </td>
        </tr>
    </table>
</form>
<script>
    var qudaiapplyAreaEditVm = new Vue({
        el: '#<?php echo $uniqid;?>',
        data: {
            params: JSON.parse('<?php echo addslashes($dataset);?>'),
            prov: JSON.parse('<?php echo addslashes($prov);?>'),
            city: JSON.parse('<?php echo addslashes($city);?>'),
            area: JSON.parse('<?php echo addslashes($area);?>'),
            qudaiLevel: JSON.parse('<?php echo addslashes($qudai_level);?>'),
            submitParams:{
                id:0,
                area:0,
                area_name:'',
                area_level:0,
                realname:'',
                company_name:'',
                phone:'',
            },
            selectProvName:'',
            selectCityName:'',
            selectAreaName:'',
        },
        mounted: function (){
            this.selectProvName = this.params.province_name;
            this.selectCityName = this.params.city_name;
            this.selectAreaName = this.params.area_name;
        },
        methods: {
            provChange:function (event) {
                this.params.city_id = 0;
                this.selectProvName = event.target.selectedOptions[0].label;
            },
            cityChange:function (event) {
                if(this.params.area_level === 3){
                    this.params.area_id = 0;
                }
                this.selectCityName = event.target.selectedOptions[0].label;
            },
            areaChange:function (event) {
                this.selectAreaName = event.target.selectedOptions[0].label;
            },
            submit: function () {
                if(this.params.id <= 0){
                    $.messager.alert('提示', '参数出错', 'warning');
                    $("#qudaiapplydlg").dialog('close');
                    return;
                }
                if(this.params.area_level === 3 && this.params.area_id <= 0){
                    $.messager.alert('提示', '县区代理必须选择代理区县', 'warning');
                    return;
                }
                if(this.params.city_id <= 0){
                    $.messager.alert('提示', '必须选择代理城市', 'warning');
                    return;
                }
                this.submitParams.area_name = this.params.area_name;
                if(this.params.area_level === 3){
                    this.submitParams.area = this.params.area_id;
                    this.submitParams.area_name = `${this.selectProvName}${this.selectCityName}${this.selectAreaName}`;
                }else{
                    this.submitParams.area = this.params.city_id;
                    this.submitParams.area_name = `${this.selectProvName}${this.selectCityName}`;
                }
                this.submitParams.id = this.params.id;
                this.submitParams.area_level = this.params.area_level;
                this.submitParams.realname = this.params.realname;
                this.submitParams.company_name = this.params.company_name;
                this.submitParams.phone = this.params.phone;
                $.post('/admin/qudaiapply/areaedit', this.submitParams, function (data) {
                    if (data.ret === 0) {
                        $.messager.show({
                            title: '提示',
                            msg: data.msg,
                            timeout: 3000,
                            showType: 'slide'
                        });
                        $('#<?php echo $uniqid;?>').form('clear');
                        $("#qudaiapplydlg").dialog('close');
                        qudaiapplyReload(true);
                    } else {
                        $.messager.alert('提示', data.msg, 'warning');
                    }
                }, 'json');
            }
        }
    });
    $(function () {
        $('#qudaiapplyAreaEditsubmit').click(function (data) {
            qudaiapplyAreaEditVm.submit();
        });
    });
</script>
